<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { getSysImgUrl, isFullDomainName } from '/@/utils/index';
import { QUERY_PHOTO_CAROUSEL_LIST } from '/@/api/modules/base/photo-carousel';

const props = withDefaults(
  defineProps<{
    /**
     * 轮播类型
     * 2-后勤端
     * 3-员工端
     */
    type: 2 | 3;
  }>(),
  {
    type: 2,
  },
);
const state = reactive<{ active: number; photoCarouselList: AppPhotoCarousel.Dto[] }>({
  active: 0,
  photoCarouselList: [],
});

function goTo(url: string) {
  if (!url) return;
  if (isFullDomainName(url)) {
    window.location.href = url;
  } else {
    navigateTo({ url });
  }
}

function queryList() {
  QUERY_PHOTO_CAROUSEL_LIST({
    comQuery: { page: 1, pageSize: 10 },
    publishLogistics: props.type === 2 ? 1 : undefined,
    publishStaff: props.type === 3 ? 1 : undefined,
  }).then((res) => {
    state.photoCarouselList = res.content || [];
  });
}

onMounted(() => {
  queryList();
});
</script>

<template>
  <view class="home-staff-photo-carousel">
    <view v-for="item in state.photoCarouselList" :key="item.id" @click="goTo(item.landingPage)">
      <image
        class="home-staff-photo-carousel__img"
        :src="getSysImgUrl(item.fileUrl)"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style lang="scss">
.home-staff-photo-carousel {
  &__swiper-item {
    margin-bottom: 20px;
  }

  &__img {
    width: 100%;
    height: 150px;
    border-radius: 20px;
  }
}
</style>
